﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>用户管理</title>
    <!--引入文件-->
    <link href="~/Content/themes/default/easyui.css" rel="stylesheet" />
    <link href="~/Content/themes/icon.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.8.2.min.js"></script>
    <script src="~/Scripts/jquery.easyui.min.js"></script>
    <script src="~/Scripts/easyui-lang-zh_CN.js"></script>
    <script src="~/Scripts/datapattern.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>
    <link href="~/Content/BaseStyle.css" rel="stylesheet" />

    <script type="text/javascript">
        //获取url中的参数
        function getUrlParam(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
            var r = window.location.search.substr(1).match(reg);  //匹配目标参数
            if (r != null) return unescape(r[2]); return null; //返回参数值
        }
        $(function () {
            //隐藏添加编辑
            $("#addDiv").css("display", "none");
            $("#editDiv").css("display", "none");
            $("#setRoleDiv").css("display", "none");            
            $("#setActionDiv").css("display", "none");
            //给搜索按钮加一个单击事件
            $("#btnSearch").click(function () {
                //获取用户输入的搜索数据.
                var pars = {
                    name: $("#txtSearchName").val(),
                    remark: $("#txtSearchRemark").val(),
                    objectId: getUrlParam("ObjectId")
                };
                //将获取的搜索的数据发送到服务端。
                loadData(pars)
            });
            loadData();
        });

        function loadData(pars) {
            $('#tt').datagrid({
                url: '/UserInfo/GetUserInfoList',
                title: '用户管理',
                width: 'auto',
                height: 'auto',
                fitColumns: true, //列自适应
                nowrap: false,
                idField: 'ID',//主键列的列明
                loadMsg: '正在加载用户的信息...',
                pagination: true,//是否有分页
                singleSelect:true,//是否单行选择
                pageSize: 20,//页大小，一页多少条数据
                pageNumber: 1,//当前页，默认的
                pageList: [10, 20, 30],
                queryParams: pars,//往后台传递参数
                columns: [[//c.UserName, c.UserPass, c.Email, c.RegTime
                    { field: 'ck', checkbox: true, align: 'left', width: 50 },
					{ field: 'ID', title: '编号', width: 80 },
					{ field: 'UName', title: '姓名', width: 120 },
                    { field: 'UPwd', title: '密码', width: 120 },
                    { field: 'DepName', title: '部门', width: 120 },
                    { field: 'Sort', title: '级别', width: 120 },
                    { field: 'Remark', title: '备注', width: 120 },
					{
					    field: 'SubTime', title: '时间', width: 80, align: 'right',
					    formatter: function (value, row, index) {
					        return (eval(value.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"))).pattern("yyyy-M-d");
					    }
					}
                ]],
                toolbar: [
                     {
                    id: 'btnAdd',
                    text: '添加',
                    iconCls: 'icon-add',
                    handler: function () {

                        addInfo();
                    }
                     },
                     {
                         id: 'btnDelete',
                         text: '删除',
                         iconCls: 'icon-remove',
                         handler: function () {

                             deleteInfo();
                         }
                     },
                {
                    id: 'btnEidt',
                    text: '编辑',
                    iconCls: 'icon-edit',
                    handler: function () {
                        showEditInfo();
                    }
                }, {
                    id: 'btnSetUserRole',
                    text: '为用户分配角色',
                    iconCls: 'icon-edit',
                    handler: function () {
                        showSetUserRoleInfo();
                    }
                }],
            });
        }
        //为用户分配权限
        function showSetUserActionInfo()
        {
            var rows = $('#tt').datagrid('getSelections');//获取所选择的行
            if (rows.length != 1) {
                $.messager.alert("提示", "请选择要分配权限的用户!", "error");
                return;
            }
            //将要修改的数据查询出来，显示到文本框中。
            var id = rows[0].ID;
            $("#setActionFrame").attr("src", "/UserInfo/ShowUserAction/?userId=" + id);
            $("#setActionDiv").css("display", "block");
            $('#setActionDiv').dialog({
                title: '为用户分配权限信息',
                width: 500,
                height: 300,
                collapsible: true,
                maximizable: true,
                resizable: true,
                modal: true,
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-ok',
                    handler: function () {
                        ////表单校验                        
                        //var chileWindow = $("#setRoleFrame")[0].contentWindow;
                        //chileWindow.subForm();
                    }
                }, {
                    text: '关闭',
                    iconCls: 'icon-no',
                    handler: function () {
                        $('#setActionDiv').dialog('close');
                    }
                }]
            });



        }

        function showSetUserRoleInfo()
        {
            //判断一下用户是否选择了要修改的数据
            var rows = $('#tt').datagrid('getSelections');//获取所选择的行
            if (rows.length != 1) {
                $.messager.alert("提示", "请选择要设置角色的1条用户数据", "error");
                return;
            }
            //将要修改的数据查询出来，显示到文本框中。
            var id = rows[0].ID;
            $("#setRoleFrame").attr("src", "/UserInfo/ShowSetUserRoleInfo/?userId=" + id);
            $("#setRoleDiv").css("display", "block");

            $('#setRoleDiv').dialog({
                title: '设置用户角色信息',
                width: 300,
                height: 200,
                collapsible: true,
                maximizable: true,
                resizable: true,
                modal: true,
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //表单校验                        
                        var chileWindow = $("#setRoleFrame")[0].contentWindow;
                        chileWindow.subForm();
                    }
                }, {
                    text: '关闭',
                    iconCls: 'icon-no',
                    handler: function () {
                        $('#setRoleDiv').dialog('close');
                    }
                }]
            });

        }

        //为用户分配完角色以后调用该方法
        function setUserRoleAfter(data)
        {

            if (data=="ok")
            {
                $('#setRoleDiv').dialog('close');
                $('#tt').datagrid('reload');
            }
            else
            {

            }

        }


        //删除数据
        function deleteInfo() {
            var rows = $('#tt').datagrid('getSelections');//获取所选择的行
            if (!rows || rows.length == 0) {
                //alert("请选择要修改的商品！");
                $.messager.alert("提醒", "请选择要删除的记录!", "error");
                return;
            }
            //$.messager.confirm("提示", "确定要删除数据吗xxx?", function (r) { });

            $.messager.confirm("提示", "确定要删除数据吗", function (r) {
                if (r) {
                    //获取要删除的记录的ID值。
                    var rowsLength = rows.length;
                    var strId = "";
                    for (var i = 0; i < rowsLength; i++) {
                        strId = strId + rows[i].ID + ",";//1,2,3,
                    }
                    //去掉最后一个逗号.
                    strId = strId.substr(0, strId.length - 1);
                    //将获取的要删除的记录的ID值发送到服务端.
                    $.post("/UserInfo/DeleteUserInfo", { "strId": strId }, function (data) {
                        if (data == "ok") {
                            //reload 不调转到第一页  load 调整到第一页
                            $('#tt').datagrid('reload');//加载表格不会跳到第一页。
                            //清除上次操作的历史的记录。
                            $('#tt').datagrid('clearSelections')
                        } else {
                            $.messager.alert("提醒", "删除记录失败!", "error");
                        }
                    });
                }
            });

        }

        //添加数据
        function addInfo() {

            //1、获取是否已经存在
            //给IFrame指定页面URL
            $("#addFrame").attr("src", "/UserInfo/ShowAddInfo" + "?ObjectId=" + getUrlParam("ObjectId"));
            $("#addDiv").css("display", "block");
            $('#addDiv').dialog({
                title: '添加用户信息',
                width: 400,
                height: 300,
                collapsible: true,
                maximizable: true,
                resizable: true,
                modal: true,
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //表单校验
                        //validateInfo($("#addForm"));
                        //$("#addForm").submit();//提交表单
                        var childwindow = $("#addFrame")[0].contentWindow;
                        //console.warn(childwindow);
                        //调用子窗体中的方法完成表中的提交
                        childwindow.subForm();
                    }
                }, {
                    text: '关闭',
                    iconCls: 'icon-no',
                    handler: function () {
                        $('#addDiv').dialog('close');
                    }
                }]
            });

        }
        //完成添加后调用该方法
        function afterAdd(data) {
           
            if (data == "ok") {
                $('#addDiv').dialog('close');   //关闭dialog
                $('#tt').datagrid('reload');//加载表格不会跳到第一页。
                $("#addForm input").val("");
            }
        }
        //表单校验
        function validateInfo(control) {
            control.validate({//表示对哪个form表单进行校验，获取form标签的id属性的值
                rules: {//表示验证规则
                    UName: "required",//表示对哪个表单元素进行校验，要写具体的表单元素的name属性的值
                    Remark: {
                        required: true
                    },
                    UPwd: {
                        required: true,
                        minlength: 5
                    },
                    Sort: {
                        required: true
                    }
                },
                messages: {
                    UName: "请输入用户名",
                    Remark: {
                        required: "请输入备注"
                    },
                    UPwd: {
                        required: "请输入密码",
                        minlength: jQuery.format("密码不能小于{0}个字 符")
                    },
                    Sort: {
                        required: "请输入排序"
                    }
                }
            });
        }
        //展示一下要修改的数据.
        function showEditInfo() {
            //判断一下用户是否选择了要修改的数据
            var rows = $('#tt').datagrid('getSelections');//获取所选择的行
            if (rows.length != 1) {
                $.messager.alert("提示", "请选择要修改的数据", "error");
                return;
            }
            //给IFrame指定页面URL
            $("#editFrame").attr("src", "/UserInfo/ShowEditInfoView" + "?id=" + rows[0].ID);
            $("#editDiv").css("display", "block");
            $('#editDiv').dialog({
                title: '修改用户数据',
                width: 400,
                height: 300,
                collapsible: true,
                maximizable: true,
                resizable: true,
                modal: true,
                buttons: [{
                    text: '提交',
                    iconCls: 'icon-ok',
                    handler: function () {
                        //表单校验
                        //validateInfo($("#addForm"));
                        //$("#addForm").submit();//提交表单
                        var childwindow = $("#editFrame")[0].contentWindow;
                        //console.warn(childwindow);
                        //调用子窗体中的方法完成表中的提交
                        childwindow.subForm();
                    }
                }, {
                    text: '关闭',
                    iconCls: 'icon-no',
                    handler: function () {
                        $('#editDiv').dialog('close');
                    }
                }]
            });
            
        }
        //更新以后调用该方法.
        function afterEdit(data) {
         
            if (data == "ok") {
                $('#editDiv').dialog('close');
                $('#tt').datagrid('reload');//加载表格不会跳到第一页。
            } else {
                $.messager.alert("提示", "修改的数据失败", "error");
            }

        }
        //将序列化成json格式后日期(毫秒数)转成日期格式
        function ChangeDateFormat(cellval) {
            var date = new Date(parseInt(cellval.replace("/Date(", "").replace(")/", ""), 10));
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var currentDate = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            return date.getFullYear() + "-" + month + "-" + currentDate;
        }
    </script>

</head>
<body>



    <!--展示数据-->
    <div>
        用户名:<input type="text" id="txtSearchName" />&nbsp;&nbsp;
        备注:<input type="text" id="txtSearchRemark" />
        <input type="button" id="btnSearch"value="搜索" />

        <table id="tt" style="width: 700px;" title="标题，可以使用代码进行初始化，也可以使用这种属性的方式" iconcls="icon-edit">


        </table> 
    </div>

    <!--添加数据-->
    <div id="addDiv" style="display:none; overflow:hidden;">

        <iframe id="addFrame" style="width:100%;height:100%;" frameborder="0" scrolling="auto"></iframe>
        @*@using(Ajax.BeginForm("AddUserInfo","UserInfo",new {},
            new AjaxOptions(){ HttpMethod="post",OnSuccess="afterAdd"},
            new {id="addForm"}))
            {
                <table>
                    <tr><td>用户名</td><td><input type="text" name="UName" /></td></tr>
                    <tr><td>密码</td><td><input type="password" name="UPwd" /></td></tr>
                    <tr><td>部门</td><td></td></tr>
                    <tr><td>备注</td><td><input type="text" name="Remark" /></td></tr>
                    <tr><td>排序</td><td><input type="text" name="Sort" /></td></tr>
                </table>
            }*@
    </div>
    <!--修改数据-->
    
    @*<div id="editDiv">
        @using (Ajax.BeginForm("EditUserInfo", "UserInfo", new { },
        new AjaxOptions() { HttpMethod = "post", OnSuccess = "afterEdit" },
        new { id = "editForm" }))
        {
            <!--隐藏域, ID 必不可少-->
            <input type="hidden" name="ID" id="txtId" />
            <input type="hidden" name="SubTime" id="txtSubTime" />
            <input type="hidden" name="DelFlag" id="txtDelFlag" />
            <table>
                <tr><td>用户名</td><td><input type="text" name="UName" id="txtUName" /></td></tr>
                <tr><td>密码</td><td><input type="password" name="UPwd" id="txtUPwd" /></td></tr>
                <tr><td>备注</td><td><input type="text" name="Remark" id="txtRemark" /></td></tr>
                <tr><td>排序</td><td><input type="text" name="Sort" id="txtSort" /></td></tr>
            </table>
        }
    </div>*@
    <div id="editDiv" style="display: none; overflow: hidden;">
        <iframe id="editFrame" style="width:100%;height:100%;" frameborder="0" scrolling="auto"></iframe>
    </div>
    <!--设置用户角色-->
    <div id="setRoleDiv" style="display:none">
        <iframe id="setRoleFrame" scrolling="no" width="100%" height="100%" frameborder="0">


        </iframe>

    </div>

    <!--设置用户权限-->
    <div id="setActionDiv" style="display:none">
        <iframe id="setActionFrame" scrolling="no" width="100%" height="100%" frameborder="0"></iframe>
    </div>


</body>
</html>
